<!--  -->
<template>
  <div>
    <div class="div-box">
      <div class="btn">创建数字员工</div>
    
      <div class="contain-desk">


        <div class="list-item" :class="device === 'mobile' ? 'mobileClass' : ''" v-for="(item, index) in roleList" :key="item.id">

          <div class="item-head">
            <img :src="item.empHeader">
            <div class="item-head-box1">
              <p class="item-head-p1">{{item.empName}}</p>
              <p class="item-head-p2 ">{{item.remark}}</p>
            </div>
            <div class="item-head-box2">
              <p class="item-head-p1">{{item.askCount}}</p>
              <p class="item-head-p2">处理问题数</p>

            </div>

          </div>

          <div class="item-foot">
            <div class="item-foot-box">
              <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/updateFile.png">
              <p>配置知识库</p>
            </div>
            <div class="item-foot-box">
              <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/shareEmployess.png">
              <p>分享员工</p>
            </div>
            <div class="item-foot-box">
              <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/mess.png">
              <p>更多</p>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import common from "@/common/js/common.js"
import { receiveWorkbencheStaffListNet, recommendEmp } from "@/api/aiworker.js";
export default {
  data () {
    return {
      roleList: []
    }
  },

  computed: {

    device () {
      return this.$store.state.app.device
    },

  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    console.log("-0---");
    receiveWorkbencheStaffListNet().then((res) => {
      if (res.code == 200) {
        console.log(res);
        this.roleList = res.data;
        if (res.data != null && res.data.length > 0) { 
          this.$localstore.set(
            "orgId",
            res.data[0].orgId
          );
        }

      } else {

        if (!common.isStringEmpty(res.message)) {
          this.$message(res.message);
        }

      }
    }).catch((err) => {

      if (!common.isStringEmpty(JSON.stringify(err))) {
        this.$message(JSON.stringify(err.message));
      }
    });
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.div-box {
  display: flex;
  flex-direction: column;
  margin: 15px;
}
.btn{
  width: 128px;
height: 41px;
background: linear-gradient(173deg, #0082FA 0%, #4DA9FF 50%, #0E51FE 100%);
border-radius: 8px 8px 8px 8px;
text-align: center;
font-size: 14px;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 41px;
align-self: flex-end;
margin-right: 5px;


}
.contain-desk {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;

}



.list-item {

  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 30px) / 3);

  margin: 5px 5px;
  height: 174px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EAF1F9;
  cursor: pointer;
  box-sizing: border-box;
}

.mobileClass{
  flex: 0 0 calc(100%);
}
.item-head{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.item-head img{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-left: 14px;
 
}
.item-head-box1{
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 50px;
  justify-content: center;
  margin-left: 8px;
  
}
.item-head-box2{
  display: flex;
  flex-direction: column;
  height: 50px;
  justify-content: center;
  margin-left: 8px;
  align-items: center;
  margin-right: 14px;
  
}
.item-head-p1{
  font-size: 16px;
font-weight: 600;
color: #000000;
line-height: 16px;
margin: 0px;
}
.item-head-p2{
  font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, .4);
line-height: 12px;
margin: 8px 0 0 0;
}
.item-foot {
  display: flex;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 16px;

}

.item-foot-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin: 5px;
  height: 80px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEF3F8;
}
.item-foot-box img{

  width: 28px;
  height: 28px;
}
.item-foot-box p{
  font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, .4);
line-height: 12px;
margin-top: 8px;
}
</style>